<template>
  <div class="login-model">
    <el-form :model="form" ref="form" class="login-form" v-if="isLoginShow">
      <input v-model.trim="form.lastCodeKey" type="hidden">
      <el-row>
        <el-col :span="24" class="login-model--top">
          <div class=title>{{$t('login.cloudkfLogin')}}</div>
          <div class="right" v-if="!isOem">
             <a :href="dxurl" :title="$t('login.clouddxLogin')" target="_blank">{{$t('login.clouddxLogin')}}</a>
          </div>
        </el-col>
        <el-col :span="24" class="login-extentype">
          <ul>
            <li class="login-type" v-bind:class="{'active': form.extenType == 'Local'}" v-on:click="form.extenType = 'Local'">
              <span class="phone">
              <div>
              <input type="radio" v-model.trim="form.extenType" value="Local" style="opacity: 0"/>
              <i class="icon iconfont icon-shouji"></i>
              </div>
              </span>
              <div class="tooltip tooltip-div">
                {{$t('login.custCallsTransferredAgent')}}
              </div>
              <i class="tooltip tooltip-i"></i>
            </li>
            <li class="login-type" v-bind:class="{ 'active': form.extenType == 'gateway'}" v-on:click="form.extenType = 'gateway'">
              <span class="tel">
                  <div>
                  <input type="radio" v-model.trim="form.extenType" value="gateway" style="opacity: 0">
                <i class="icon iconfont icon-dianhua"></i>
                  </div>
              </span>
              <div class="tooltip tooltip-div">
                {{$t('login.independPhoneEquipment')}}
              </div>
              <i class="tooltip tooltip-i"></i>
            </li>
            <li class="login-type" v-bind:class="{ 'active': form.extenType == 'sip'}" v-on:click="form.extenType = 'sip'">
              <span class="cup">
                    <div>
                      <input type="radio" v-model.trim="form.extenType" value="sip" style="opacity: 0">
                  <i class="icon iconfont icon-diannao"></i>
                    </div>
              </span>
              <div class="tooltip tooltip-div">
                {{$t('login.enterpriseCommunications')}}
              </div>
              <i class="tooltip tooltip-i"></i>
            </li>
          </ul>
        </el-col>
        <el-col :span="24">
          <ul class="tip">
            <li v-bind:class="{'active1': form.extenType == 'Local'}">{{$t('login.phoneAnswe')}}</li>
            <li v-bind:class="{ 'active1': form.extenType == 'gateway'}">{{$t('login.andlineAnswe')}}</li>
            <li v-bind:class="{ 'active1': form.extenType == 'sip'}">{{$t('login.onLineServer')}}</li>
          </ul>
        </el-col>
        <el-col :span="24" class="login-form">
          <span class="l-input l-name" prop="name">
            <el-input :placeholder="$t('login.plahText')" type="text"  name="name" v-model.trim="form.loginName">
              <template slot="prepend">{{$t('login.account')}}</template>
            </el-input>
              <!--<input type="text"  name="name" v-model.trim="form.loginName" :placeholder="$t('login.plahText')">-->
          </span>
          <span class="l-input l-password" style="position: relative" :class="changPwd ? 'pwd-input' : ''">
            <el-input :type="isPwdType" name="password" autocomplete="off" v-model="form.password" :placeholder="$t('login.loginPassword')" @change="changePwass">
              <template slot="prepend">{{$t('login.loginPassword')}}</template>
            </el-input>
            <div class="operator" v-show="changPwd">
              <span @click="del" style="padding-right: 5px;cursor: pointer">X</span>
            </div>
              <!--<input type="password" name="password" autocomplete="new-password" v-model="form.password" :placeholder="$t('login.loginPassword')">-->
          </span>
          <!-- 数字字母验证码 start -->
          <span class="l-input l-name" prop="code" v-if="isCaptcha">
            <el-row>
              <el-col :span="12">
                <el-input class="code-input" :placeholder="$t('login.codeText')" type="text"  name="captcha" v-model.trim="form.captcha"></el-input>
              </el-col>
              <el-col :span="12">
                <div class="code-img" @click="getCaptcha" v-html="svgData"></div>
              </el-col>
            </el-row>
          </span>
          <!-- 数字字母验证码 end -->
          <div class="login-status">
            <label  class="">
              <input type="checkbox" v-model.trim="form.remember" :checked="form.remember" class="l-rem">
              <span class="remember"></span>
              <span>{{$t('login.remember')}}</span>
            </label>

            <span @click.stop="forgetPwd" v-if="!privatization" class="forget-box" :class="isEnglis === 'en'?'en-forget':''">{{$t('login.forgetPwd')}}</span>
            <label  class="">
              <input type="checkbox"  v-model.trim="form.login_busyType" class="l-sta" @change="changeBusyType">
              <span class="status"></span>
              <span v-show="form.login_busyType">{{$t('login.idle')}}</span>
              <span v-show="!form.login_busyType">{{$t('login.busy')}}</span>
            </label>
          </div>
          <button type="submit" class="btn-login" :disabled="btn" v-on:click.prevent="login">{{ signName }}</button>
          <div class="policy-box login-status" :class="isOem?'oem-policy-box':''" v-if="!privatization">
            <label v-if="!isOem && platform_urls && platform_urls.m7ServiceTerms && platform_urls.m7PrivacyPolicy">
             <input type="checkbox" v-model.trim="form.policy" :checked="form.policy" class="l-rem">
              <span class="remember"></span>
             <span class="policy-text" v-html="$t('login.policy', {serviceTerms: platform_urls.m7ServiceTerms, privacyPolicy: platform_urls.m7PrivacyPolicy})"></span>
            </label>
            <div class="clearfix oem-policy" v-if="isOem && oemInfo && oemInfo.privacyProtocolInfo" v-html="oemInfo.privacyProtocolInfo || ''"></div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-row v-if="!isLoginShow" class="forget">
      <forgetPwdCom @returnLogin="returnLogin" :isEnglis="isEnglis"></forgetPwdCom>
    </el-row>
    <!--绑定手机号-->
    <phone @emailAuthCode="loginSend" @dialogSuccess="dialogSuccess" :phone="phone"></phone>
    <!-- 邮箱验证 -->
    <email :email="email" @dialogSuccess="dialogSuccess"></email>
    <!-- <qrcode :content="content"></qrcode> -->
    <!--验证码-->
    <identify-code @identifyToLogin="identifyToLogin" @identifyCodeClose="identifyCodeClose" :identifyCode="identifyCode"></identify-code>
    <!--http验证-->
    <https-remind :httpsData="httpsData" @isGoto="isGotoKf"></https-remind>
  </div>
</template>

<script>
  import NodeRSA from 'node-rsa'
  import { deepClone } from '@/utils/m7Utils.js'
  import I18n from './I18nSelect'
  // import Browser from './Browser'
  import Email from './Email'
  import forgetPwdCom from './forgetPwd'
  // import qrcode from './QrCode'
  import Phone from './Phone'
  // import Bottom from './Footer'
  import IdentifyCode from './IdentifyCode'
  import HttpsRemind from './httpsRemind.vue'
  // import Editor from '../../ui-modules/editor/Editor'
  const md5 = require('md5')
  function getUrlKey(name,url){
　　return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ""])[1].replace(/\+/g, '%20')) || null
  }
  function initForm (Vform, that) {
    let ls = window.localStorage
    let lastname = getUrlKey('id',window.location.href) || ls.getItem('lastname') || ''
    let newform  = ls.getItem('newform') || {}
    if(getUrlKey('id',window.location.href) && !newform[lastname] && (JSON.parse(ls.getItem('loginForm')).loginName != getUrlKey('id',window.location.href) )) {
           return
    }
    if ((newform[lastname] || !!ls.getItem('loginForm')) && Vform.remember) {
      console.log(newform[lastname], ls.getItem('loginForm'));
      let form = (ls.getItem('newform')&&JSON.parse(ls.getItem('newform'))[lastname]) || JSON.parse(ls.getItem('loginForm'))
      // Object.assign(Vform, form)
      for (let key in form) {
        Vform[key] = form[key]
      }
    }
    if (window.location.protocol === 'http:') {
      if (window.location.hash) {
        let logindata = window.location.hash.split('#')[1].split('&')
        let data = {
          extenType: logindata[1].slice(10),
          login_busyType: logindata[2].slice(15),
          remember: logindata[3].slice(9),
          policy: logindata[4] ? logindata[4].slice(7) : 'false'
        }
        if (data.login_busyType === 'true') {
          data.login_busyType = true
        } else {
          data.login_busyType = false
        }
        if (data.remember === 'true') {
          data.remember = true
        } else {
          data.remember = false
        }
        if (data.policy === 'true') {
          data.policy = true
        } else {
          data.policy = false
        }
        console.error(data.extenType)
        that.form.extenType = data.extenType
        that.form.login_busyType = data.login_busyType
        that.form.remember = data.remember
        that.form.policy = data.policy
        if (that.form.loginName && that.form.password) {
          that.login()
        } else {
          return
        }
      }
    }
  }

  export default {
    name: 'loginModule',
    components: {
      forgetPwdCom,
      I18n,
        //    Browser,
      Email,
      // qrcode,
      Phone,
      // 'v-editor': Editor,
        //    Bottom,
      IdentifyCode,
      HttpsRemind
    },
    data () {
      return {
        forgetType: 'phone',
        isLoginShow: true,
        isCaptcha: false,   //   是否启用验证码
        captchaId: '',   //   获取验证码需要的 id
        svgData: '',   //   验证码
        changPwd: false,
        showPwd: false,
        isEnglis: '',
        // input content to editor
        inputContent: 'base on wangeditor',
        // output content from editor
        outputContent: '',
        // set image upload api url
        uploadUrl: '/api/v1/help/upload/wangEditorH5File',
        sta: 'sta-on',
        btn: false, // true 已经提交过， false没有提交过
        name: '',
        phone: {
          isShow: false,
          _id: '',
          form: null
        },
        email: {
          isShow: false,
          lastCodeKey: '',
          form: null
        },
        identifyCode: {
          isShow: false,
          token1: ''
        },
        form: {},
        form1: {},
        httpsData: {
          isShow: false,
          alink: ''
        },
        ifJump: true,
        alink: '',
        remberPwd: '',
        isPwdType: 'password'
      }
    },
    props: {
      isOem: Boolean
    },
    computed: {
      oemInfo () {
        let oemObj = this.$store.state.oemObj
        if (oemObj && oemObj.oemInfo) {
          return oemObj.oemInfo
        }
      },
      dxurl () {
        if (document.location.protocol === 'https:') {
          return this.$store.state.platform_urls.ydx_https
        } else {
          return this.$store.state.platform_urls.ydx
        }
      },
      privatization () {
        return this.$store.state.privatization
      },
      platform_urls () {
        return this.$store.state.platform_urls
      },
      loginStatus () {
        return this.$store.state.login
      },
      signName () {
        return this.btn ? this.$t('login.loginingBtn') : this.$t('login.loginBtn')
      }
    },
    methods: {
      dialogSuccess () {
        this.btn = true
      },
      identifyCodeClose () {
        this.identifyCode.isShow = false
        this.btn = false
      },
      returnLogin () {
        this.isLoginShow = true
      },
      forgetPwd () {
        this.isLoginShow = false
        this.forgetType = 'phone'
      },
      changePwass () {
        this.changPwd = true
      },
      handlePwd () {
        this.showPwd = !this.showPwd
        if (this.showPwd) {
          this.isPwdType = 'text'
        } else {
          this.isPwdType = 'password'
        }
      },
      del () {
        this.form.password = ''
      },
      changeLang (lang) {
        this.isEnglis = lang
      },
      validate (vStr) {
        if (this.form.loginName.length === 0 && vStr === 'name') {
          this.$message.error(this.$t('login.isNullByName'))
          return true
        }
      },
      login () {
        this.btn = true
        this.form1 = deepClone(this.form)
        this.form1.captchaId = this.captchaId
        if (this.isCaptcha) {
          if (!this.form1.captcha || this.form1.captcha.length === 0) {
            this.$message.error(this.$t('login.codeText'))
            this.btn = false
            return
          }
        } else {
          delete this.form1.captchaId
          delete this.form1.captcha
        }
        console.log(this.form1)
        if (this.validate('name')) {
          this.btn = false
          return
        }
        if (this.form1.loginName.length === 0 || this.form1.password.length === 0) {
          this.$message.error(this.$t('login.isNull'))
          this.btn = false
          return
        }
        if (this.isOem) {
          const privacyClick = document.querySelector('#privacyClick') || ''
          if (privacyClick) {
            if (privacyClick && !privacyClick.checked) {
              this.$message.error(this.$t('login.policyWarnOem'))
              this.btn = false
              return
            } else {
              this.form1.policy = true
            }
          }
        } else {
          if (!this.form1.policy && !this.isOem && !this.privatization && this.platform_urls && this.platform_urls.m7ServiceTerms && this.platform_urls.m7PrivacyPolicy) { // 没勾选协议 && 不是oem && 不是私云 && 有配置协议url
            this.$message.error(this.$t('login.policyWarn'))
            this.btn = false
            return
          }
        }
        let password = this.form1.password
        if (!isMD5(password)) {
          this.form1.password = md5(this.form1.password)
        }
        this.remberPwd = this.form1.password
        let data = {
          'accountName': this.form1.loginName
        }
        let ishttps = document.location.protocol
        console.log(this.$store.state.oemObj.oemFlag)
        if (ishttps === 'https:' && (this.$store.state.oemObj.oemFlag === '')) {
          this.$store.dispatch('checkAccountHttps', data).then(rep => {
            // 1. 计费 pbx管理中搜索当前账号所在的pbx,pbx得配置https的ass域名.注意：是当前账户下的所有pbx,有一个条件不满足就false（https的条件）
            // 2. 系统内的所有对接不能有http的地址（https的条件）
            // 3. 视频客服开启之后在http环境不能用
            if (!rep || !rep.success) {
              this.btn = false
            }
            if (!rep.isAllow) {
              this.httpsData.isShow = true
              let hash = 'from=kf&extenType=' + this.form1.extenType + '&login_busyType=' + this.form1.login_busyType + '&remember=' + this.form1.remember + '&policy=' + this.form1.policy
              this.httpsData.alink = this.$store.state.platform_urls.ykf + '/#' + hash
            } else {
              this.sendLogin()
            }
          })
        } else {
          this.sendLogin()
        }
      },
      sendLogin () {
        this.$store.dispatch('getLoginSecretKey', {}).then(res1 => {
          if (res1.success) {
            let key = new NodeRSA(res1.secret)
            let _form = deepClone(this.form1)
            let encrypted = key.encrypt(_form.password + ':' + res1.num, 'base64')
            _form.safeKey = encrypted
            // delete _form.password
            this.$store.dispatch('signIn', _form).then(res => {
              delete this.form.identifyCodeToken
              delete this.form1.identifyCodeToken
              if (res.success) {
                if (res.identifyCodeShow) {
                  let token1 = res.token1
                  this.identifyCode = {
                    isShow: true,
                    token1: token1
                  }
                  if (this.isCaptcha) {
                    this.getCaptcha()
                  }
                } else {
                  this.loginSend(res)
                }
              } else {
                this.btn = false
                this.httpsData.isShow = false
                if (this.isCaptcha) {
                  this.getCaptcha()
                }
              }
            })
          }
        })
      },
      loginSend (val) {
        this.btn = true
        if (val && val.logType === 'bind') {
          this.phone = {
            isShow: true,
            _id: val.sessionId,
            form: this.form1
          }
          this.btn = false
        } else if (val && val.lastCodeKey) {
          this.email = {
            isShow: true,
            lastCodeKey: val.lastCodeKey,
            form: this.form1
          }
          this.btn = false
        } else if (this.$store.state.login) {
          let ls = window.localStorage
          let form = {}
          if (this.form1.remember) {
            form = this.form1
            form.loginFlag = 'kf'
          } else {
            form = this.form1
            form.password = ''
          }
          this.$router.replace({
            path: '/index'
          })
          let newform = JSON.parse(ls.getItem('newform')) || {}
          newform[this.form.loginName] = form
          ls.setItem('newform', JSON.stringify(newform))
          let loadLocalFlag = this.$store.state.config.loadLocalFlag
          if (!loadLocalFlag) {
            // this.fetchData()
          }
          ls.setItem('lastname',this.form.loginName)
        } else {
          this.btn = false
        }
      },
      identifyToLogin (token2) {
        this.btn = true
        this.form1.identifyCodeToken = token2
        this.$store.dispatch('getLoginSecretKey', {}).then(res1 => {
          if (res1.success) {
            let key = new NodeRSA(res1.secret)
            let _form = deepClone(this.form1)
            let encrypted = key.encrypt(_form.password + ':' + res1.num, 'base64')
            _form.safeKey = encrypted
            // delete _form.password
            this.$store.dispatch('signIn', _form).then(res => {
              delete this.form1.identifyCodeToken
              delete this.form.identifyCodeToken
              if (res.success) {
                if (res.identifyCodeShow) {
                  let token1 = res.token1
                  this.identifyCode = {
                    isShow: true,
                    token1: token1
                  }
                } else {
                  this.loginSend(res)
                }
              } else {
                this.btn = false
                this.httpsData.isShow = false
                if (this.isCaptcha) {
                  this.getCaptcha()
                }
              }
            })
          }
        })
      },
      initVuexModules () { // 注销模块
        const modules = ['customer', 'call', 'webchat', 'email', 'market', 'cti', 'workbench', 'business', 'km', 'sms', 'questionnaire', 'qualityCheck', 'report', 'socket', 'monitor', 'config']
        modules.map(val => this.$store.state[module] && this.$store.unregisterModule(module))
      },
      isGotoKf (isgoto) {
        // 是否跳转到kf7
        this.ifJump = isgoto
        if (this.ifJump) {
            //        document.getElementsByClassName('btn-login')[0].click()
        } else {
          this.httpsData.isShow = false
          let password = this.form1.password
          if (!isMD5(password)) {
            this.form1.password = md5(this.form1.password)
          }
          // if (this.remberPwd !== this.form.password) {
          //   this.form.password = this.remberPwd
          // }
          this.btn = true
          this.$store.dispatch('getLoginSecretKey', {}).then(res1 => {
            if (res1.success) {
              let key = new NodeRSA(res1.secret)
              let _form = deepClone(this.form1)
              let encrypted = key.encrypt(_form.password + ':' + res1.num, 'base64')
              _form.safeKey = encrypted
              // delete _form.password
              this.$store.dispatch('signIn', _form).then(res => {
                delete this.form.identifyCodeToken
                delete this.form1.identifyCodeToken
                if (res.success) {
                  if (res.identifyCodeShow) {
                    let token1 = res.token1
                    this.identifyCode = {
                      isShow: true,
                      token1: token1
                    }
                  } else {
                    this.loginSend(res)
                  }
                } else {
                  this.btn = false
                  this.httpsData.isShow = false
                  if (this.isCaptcha) {
                    this.getCaptcha()
                  }
                }
              })
            }
          })
        }
      },
      changeBusyType () {
        window.sessionStorage.setItem('login_busy_type', this.form1.login_busyType)
      },
      // fetchData () {
      //   let self = this
      //   let langTemp = window.localStorage.getItem('lang') || 'zh_CN'
      //   let url = window.location.origin + '/static/i18n/locales/' + langTemp + '_Config' + '.json'
      //   let currentLocales = this.$i18n.getLocaleMessage(langTemp || 'zh_CN')
      //   window.fetch(url + '?_=' + Math.random(), {
      //     method: 'get',
      //     headers: {
      //       'Content-Type': 'application/json'
      //     }
      //   })
      //   .then(response => response.json())
      //   .then((res) => {
      //     let locales = ''
      //     switch (langTemp) {
      //       case 'zh_CN':
      //         locales = {...res, ...currentLocales}
      //         break
      //       case 'zh_TW':
      //         locales = {...res, ...currentLocales}
      //         break
      //       case 'en':
      //         locales = {...res, ...currentLocales}
      //         break
      //       default:
      //         locales = {...res, ...currentLocales}
      //         break
      //     }
      //     this.$i18n.setLocaleMessage(langTemp || 'zh_CN', locales)
      //     window.langJson = locales || {}
      //     this.$store.commit('LOAD_LOCAL_FLAG', true)
      //   }).catch((res) => {
      //     this.$store.commit('LOAD_LOCAL_FLAG', false)
      //     if (this.count < 3) {
      //       this.fetchData(langTemp, this.count++)
      //     } else {
      //       window.alert('Network anomaly！！！ Please check your network')
      //     }
      //   })
      // }
      getCaptcha () {     //  获取验证码图片 url
        this.$store.dispatch('getCaptchaAction', {captchaId: this.captchaId}).then(res1 => {
          if (res1.success) {
            this.svgData = res1.data
            this.$set(this.form, 'captcha', '')
          }
        })
      }
    },
    watch: {
      loginStatus (cur, old) {
        if (cur) {
          this.initVuexModules()
        }
      }
    },
    mounted () {
      if (this.isOem) {
        if (this.oemInfo && this.oemInfo.privacyProtocolInfo) { // 给标题栏上的链接加上新开窗口的属性
          this.oemInfo.privacyProtocolInfo = this.oemInfo.privacyProtocolInfo.replace(/<a/g, '<a target="_blank"')
          if (this.form.policy) { // 之前选中过
          this.oemInfo.privacyProtocolInfo = this.oemInfo.privacyProtocolInfo.replace(/<input/g, '<input checked')
          }
       }
      }
    },
    beforeMount () {
      if (window.parent !== window) {
        try {
          if (window.parent.location.origin !== window.location.origin) {
            window.sessionStorage.clear()
          }
        } catch (e) {
        }
      } else {
        window.sessionStorage.clear()
      }
      let lastname = getUrlKey('id',window.location.href) || window.localStorage.getItem('lastname') || ''
      if (lastname == 'null') lastname = ''
      let newform  = JSON.parse(window.localStorage.getItem('newform')) || {}
      // alert(lastname)
      let emailRefrech = this.$route.query.emailRefrech || ''
      const form = newform[lastname]  || {
        lastCodeKey: '',
        loginName: lastname,
        password: '',
        extenType: 'Local',
        remember: true,
        policy: false,
        login_busyType: true
      }
      if (emailRefrech) {
        this.email = {
          isShow: true,
          lastCodeKey: window.localStorage.getItem('emaillastCodeKey'),
          form: form
        }
        this.btn = false
      }
      this.initVuexModules()
      this.form = form
      if(form.loginName && form.loginName != 'null'){
        window.localStorage.setItem('lastname',form.loginName)
      }else{
         window.localStorage.removeItem("lastname");
      }
      initForm(this.form, this)
      this.isEnglis = window.localStorage.lang || 'zh_CN'
      this.changPwd = false
      window.sessionStorage.setItem('login_busy_type', this.form.login_busyType)
      this.isCaptcha = this.$store.state.isCaptcha
      this.captchaId = this.$store.state.captchaId
      if (this.isCaptcha) {
        this.getCaptcha()
      }
    }
  }
  function isMD5 (str) {
    let md5 = /^[a-f0-9]{32}$/
    return md5.test(str)
  }
</script>


<style lang="stylus" scoped>
    @import "styl/_login"
    @import "../../../assets/common.styl"
    .icon
      font-size 20px
      color #a6a6a6
    h1
    h2
      font-weight normal
    a
      color  $c-main
    .login-model
      width 580px
      min-height 416px
      background-color #fff
      box-shadow: 0px 1px 14px #ccc;
      .tip
        margin 0px 130px
        margin-top 10px
        text-align center
        li
          width: 33.33%;
          min-height: 20px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          float left
      .login-model--top
        position relative
        margin-top 38px
        margin-bottom 32px
        .title
          text-align center
          font-size 18px
          color #595959
          line-height 18px
        .right
          position absolute
          right 30px
          top: 0px
          color #666
          cursor pointer
          a
            color #666
    .login
      font-size 12px
      width 100%
      height 100%
      display flex
      justify-content center
      align-items center
      flex-direction column
    .vertical-line
      position absolute
      display inline-block
      height 295px
      width 1px
      top 0px
      left 463px
      background-color #99d013
    .login-extentype
      ul
        position relative
        text-align center
        margin: 0px 130px
        li
          width 33.33%
          min-height 40px
          border-radius 50px
          box-sizing border-box
          display inline-block
          position relative
          .tooltip-div
            position: absolute;
            z-index: 50000;
            opacity: 0.8;
            background-color: #000;
            padding: 10px;
            color: #fff;
            border-radius: 4px;
            left: -105px;
            bottom: 69px;
            width: 300px;
            text-align: left;
          .tooltip-i
            position: absolute;
            width: 1px;
            height: 1px;
            border-width: 5px;
            border-style: solid;
            opacity: 0.8;
            border-color: #000 transparent transparent transparent;
            -webkit-border-image: initial;
            -o-border-image: initial;
            border-image: initial;
            left: 48px;
            z-index: 2000;
            top: -9px;
          .tooltip
            visibility hidden
          .tip
            margin-top 10px
            word-break: break-all
            color #666
          span
            display inline-block
            border 1px solid #a6a6a6
            box-size(40px,40px)
            border-radius 41px
            text-align center
            line-height 40px
            box-sizing border-box
            .icon
              opacity .5
              color #333
          input
            box-size(40px,40px)
            position absolute
            z-index 3
            opacity 0
          input:hover
            cursor pointer
          .login-tip
            position absolute
            bottom 102px
            left 5%
            width 46em
            color $cf-white
            z-index -1
            height 42px
            user-select text
            h4
              line-height 12px
             p
              opacity .6
              margin-top 6px
              line-height 12px
        li:hover
          .tooltip
            visibility visible
          .tooltip-div
            bottom: 49px !important;
        li.active
          cursor pointer
          .tooltip-div
            bottom: 59px !important;
          span
            border: 1px solid #459ae9;
            width: 50px;
            height: 50px;
            line-height: 50px;
            div
              background: #459ae9;
              width: 40px;
              height: 40px;
              border-radius: 41px;
              text-align: center;
              line-height: 40px;
              margin: 4px;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
            .icon
                opacity 1
                color #fff
          .tip
            color #459ae9
    .login-form
        position relative
        .policy-box
          height 20px
          /*margin 20px 30px 30px*/
          text-align center
          color #333
        .oem-policy-box
          height auto
        .l-input
            width 317px
            margin 0px 130px
            margin-top 20px
            border-radius 22px
            display block
            border 0
            text-align center
            line-height 24px
            input
                background #c0DDEB
                border 0
                box-size(279px,42px)
            .operator
              position: absolute;
              right: 7px;
              top: 7px;
              font-size: 12px;
              color: #a6a6a6
        .l-code
          clear both
        .code-input
          width 130px
          float left
        .code-img
          width 130px
          height 36px
          cursor pointer
          float left
        .btn-login
          width: 317px;
          height: 40px;
          margin: 0px 130px;
          margin-top: 20px;
          font-size: 14px;
          font-weight: 900;
          background: #459ae9;
          border: 0px;
          color: #fff;
          cursor: pointer;
          border-radius: 4px;
        .disable-btn
          disabled disabled
        .forget-box
          cursor pointer
          margin-left 74px
          color #459ae9
        .en-forget
          margin-left 8px
    .login-status
      margin 0px 130px
      height 20px
      margin-top 14px
      color #333
      font-size 12px
      line-height 20px
      position relative
      >>>label
          display inline-block
          cursor pointer
          float right
          &:first-child
            float left
      &:before
        content ''
        clear both
      >>>input
        /*float none*/
        clear both
        opacity 0
        height 12px
        position absolute
      >>>span
        line-height 12px
      >>>.remember
          display inline-block
          box-size(14px,14px)
          border 1px solid #459ae9
          border-radius 2px
          color #459ae9
          line-height 12px
          text-align center
          float left
          margin-right 7px
      .status
          box-size(27px,16px)
          background-color #ea6875
          display inline-block
          border-radius 8px
          border 2px solid #ea6875
          box-sizing border-box
          float left
          margin-right 7px

      .l-sta+.status:before
          content ""
          box-size(12px,12px)
          background $cf-white
          border-radius 6px
          display inline-block
      .l-sta:checked+.status:before
          float right
      >>>.l-rem:checked+.remember:before
          content "\221A"
          font-style oblique
          font-family cursive
          font-size 12px
          font-weight 700

      .l-sta:checked+.status
          background-color  $c-main
          border 2px solid  $c-main
      .l-sta+.status:before
          float: left
  .active1
    color #459ae9
  .forget
    position relative
    .l-input
      width 317px
      margin 0px 110px
      margin-bottom 15px
      border-radius 22px
      display block
      border 0
      line-height 24px
      input
        background #c0DDEB
        border 0
        box-size(279px,42px)
    .forget-form-btn
      text-align center
      padding-top 20px
      padding-bottom 20px
      span
        border: 1px solid #a6a6a6;
        padding: 6px 20px;
        text-align: center;
        border-radius: 4px;
        color #a6a6a6
      span:hover
        border: 1px solid #459ae9;
        color: #459ae9;
        cursor pointer
    .mobile-item
      position relative
      .check-code
        top: 4px;
        position: absolute;
        left: 330px;
        min-width: 116px;
        text-align: center;
        border: 1px solid #459ae9;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
        color: #459ae9;
        cursor: pointer;
      .check-code:hover
        border: 1px solid #459ae9;
        color: #459ae9;
      .disabled
        color: #a6a6a6
        border: 1px solid #a6a6a6;
        cursor: not-allowed
      .disabled:hover
        color: #a6a6a6
        border: 1px solid #a6a6a6;
    .forget-form-type
      text-align center
      margin-top: 60px;
      margin-bottom: 50px;
      font-size: 14px;
      line-height: 14px;
      color #000
      .line
        padding 0px 20px
        color #a6a6a6
      .type
        cursor pointer
      .type:hover
        color #459ae9
    .forget-admin
      text-align center
      .icon-dianhua
        border-radius: 50%;
        padding: 8px;
        background-color: #bfbfbf;
        color: #fff;
      .forget-admin-conent
        color #a6a6a6
        margin: 20px 70px 30px 70px
      .forget-admin-btn
        span
          color #fff
          background-color #459ae9
          padding 5px 15px
          border-radius 4px
          cursor pointer
  .policy-text
    color #333
  .oem-policy
    max-height 40px
    overflow hidden
    margin-bottom 20px
    &:after
      display block
</style>
